<template>
  <div class="veri_wrap">
    <div class="img">
      <img src="../../../assets/img/tx.jpg" alt="">
    </div>
    <h1 class="h1">国庆管理后台</h1>
    <div class="inp">
      <div class="imgg">
        <img src="../../../assets/img/geren.png" alt="">
      </div>
      <Input placeholder="请输入内容" />
    </div>
    <div class="inp">
      <div class="imgg">
        <img src="../../../assets/img/suoding.png" alt="">
      </div>
      <Input placeholder="请输入内容" />
    </div>
    <div class="inp">
      <div class="imgg">
        <img src="../../../assets/img/yanzhengma.png" alt="">
      </div>
      <Input placeholder="请输入内容" />
    </div>
      <canvas id="mycanvas" ></canvas>
     <div class="btn">
      <el-button type="danger">忘记密码</el-button>
      <el-button type="success">登录</el-button>
     </div>
  </div>
</template>

<script>
export default {
  name: 'JsxyVeri',

  data() {
    return {
      
    };
  },

  mounted() {
    this.draw("BCX7")
  },

  methods: {
    draw(str){ //绘制验证码
        // 获取canvas的dom
        let mycanvas=document.getElementById("mycanvas");
        // 获取操作实例的
       let ctx=mycanvas.getConext("2d");

       
    }
  },
};
</script>
<style lang="less">
  #mycanvas{
    width:80px;
    height:30px;
    background:skyblue;
    position: absolute;
    left: 527px;
    top: 283px;
  }
 .veri_wrap{
  width: 700px;
  height: 500px;
  position: absolute;
  left: 320px;
  top: 200px;
  .h1{
    font-size: 28px;
    color: #ffffff;
    margin-left: 20px;
    margin-top: 20px;
  }
  .img{
    width: 100px;
    height: 100px;
    border-radius: 20px;
    overflow: hidden;
    margin-left: 325px;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .inp{
    margin-top: 20px;
    margin-left: 120px;
    display: flex;
    .imgg{
      width: 25px;
      height: 30px;
      border: 0.2px solid rgba(255,255,255,0.3);
      img{
        width:15px;
        height: 15px;
        margin-top: 7.5px;
      }
    }
  }
  input{
    background: transparent;
    width: 450px;
    outline: none;
    border: 0.2px solid rgba(255,255,255,0.3);
    padding-left: 10px;
  }
 }
 .btn{
  width: 500px;
  display: flex;
  margin-left: 100px;
  justify-content: space-between;
  margin-top: 20px;
 }
</style>